<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, user-scalable=no">
    <title>在线培训课程 - 技能提升平台</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
        }
        
        body {
            background-color: #f5f7fa;
            color: #333;
            font-size: 28px;
            width: 750px;
            overflow-x: hidden;
        }
        
        .container {
            width: 750px;
            margin: 0 auto;
            padding-bottom: 150px;
        }
        
        /* 顶部导航 */
        .header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 30px;
            position: sticky;
            top: 0;
            z-index: 100;
            display: flex;
            justify-content: space-between;
            align-items: center;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
        }
        
        .back-btn {
            font-size: 40px;
            color: white;
            cursor: pointer;
        }
        
        .header-title {
            font-size: 36px;
            font-weight: bold;
            text-align: center;
            flex: 1;
        }
        
        .action-btn {
            font-size: 36px;
            color: white;
            cursor: pointer;
        }
        
        /* 课程封面 */
        .course-cover {
            height: 400px;
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.5)), url('https://images.unsplash.com/photo-1497636577773-f1231844b336?ixlib=rb-4.0.3&auto=format&fit=crop&w=750&q=80');
            background-size: cover;
            background-position: center;
            display: flex;
            flex-direction: column;
            justify-content: flex-end;
            padding: 40px 30px;
            color: white;
            position: relative;
        }
        
        .course-tag {
            position: absolute;
            top: 30px;
            right: 30px;
            background: #ff9f43;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 26px;
            font-weight: bold;
        }
        
        .course-title {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 20px;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
        }
        
        .course-meta {
            display: flex;
            align-items: center;
            font-size: 26px;
            opacity: 0.9;
        }
        
        .meta-item {
            display: flex;
            align-items: center;
            margin-right: 30px;
        }
        
        .meta-item i {
            margin-right: 10px;
        }
        
        /* 课程信息卡片 */
        .info-card {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            margin-top: -30px;
            position: relative;
            z-index: 2;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }
        
        .info-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 30px;
            text-align: center;
            margin-bottom: 30px;
        }
        
        .info-item {
            display: flex;
            flex-direction: column;
        }
        
        .info-label {
            font-size: 26px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }
        
        .info-value {
            font-size: 36px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .info-value.small {
            font-size: 30px;
        }
        
        .progress-container {
            margin: 30px 0;
        }
        
        .progress-label {
            display: flex;
            justify-content: space-between;
            margin-bottom: 15px;
            font-size: 28px;
            color: #555;
        }
        
        .progress-bar {
            height: 20px;
            background: #e0e0e0;
            border-radius: 10px;
            overflow: hidden;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(to right, #6a11cb, #2575fc);
            border-radius: 10px;
            width: 65%;
        }
        
        .teacher-section {
            display: flex;
            align-items: center;
            margin-top: 30px;
            padding-top: 30px;
            border-top: 1px solid #eee;
        }
        
        .teacher-avatar {
            width: 100px;
            height: 100px;
            border-radius: 50%;
            background: #e0e0e0;
            margin-right: 20px;
            overflow: hidden;
        }
        
        .teacher-avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .teacher-info h3 {
            font-size: 32px;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .teacher-info p {
            font-size: 26px;
            color: #7f8c8d;
        }
        
        /* 课程标签 */
        .tags-container {
            display: flex;
            flex-wrap: wrap;
            gap: 15px;
            margin-top: 20px;
        }
        
        .tag {
            background: #e8f0fe;
            color: #2575fc;
            padding: 10px 20px;
            border-radius: 50px;
            font-size: 26px;
        }
        
        /* 课表部分 */
        .schedule-section {
            background: white;
            border-radius: 25px;
            padding: 40px 30px;
            margin: 30px;
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
        }
        
        .section-title {
            font-size: 36px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 30px;
            display: flex;
            align-items: center;
        }
        
        .section-title i {
            margin-right: 15px;
            color: #2575fc;
        }
        
        .schedule-tabs {
            display: flex;
            margin-bottom: 30px;
            border-bottom: 2px solid #eee;
        }
        
        .tab {
            padding: 20px 30px;
            font-size: 30px;
            cursor: pointer;
            position: relative;
            color: #7f8c8d;
        }
        
        .tab.active {
            color: #2575fc;
            font-weight: bold;
        }
        
        .tab.active::after {
            content: "";
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 4px;
            background: #2575fc;
            border-radius: 2px;
        }
        
        .schedule-list {
            max-height: 600px;
            overflow-y: auto;
        }
        
        .lesson-item {
            padding: 30px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .lesson-item:hover {
            background: #f8f9fa;
        }
        
        .lesson-icon {
            width: 80px;
            height: 80px;
            border-radius: 20px;
            background: #e8f0fe;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 36px;
            color: #2575fc;
            margin-right: 25px;
            flex-shrink: 0;
        }
        
        .lesson-content {
            flex: 1;
        }
        
        .lesson-title {
            font-size: 32px;
            font-weight: bold;
            color: #2c3e50;
            margin-bottom: 10px;
        }
        
        .lesson-meta {
            display: flex;
            font-size: 26px;
            color: #7f8c8d;
        }
        
        .lesson-meta div {
            margin-right: 20px;
            display: flex;
            align-items: center;
        }
        
        .lesson-meta i {
            margin-right: 8px;
        }
        
        .lesson-status {
            padding: 10px 20px;
            border-radius: 20px;
            font-size: 26px;
            margin-left: 15px;
        }
        
        .status-upcoming {
            background: #e0e0e0;
            color: #7f8c8d;
        }
        
        .status-live {
            background: #ffeb3b;
            color: #8a6500;
            font-weight: bold;
        }
        
        .status-completed {
            background: #4caf50;
            color: white;
        }
        
        .sign-btn {
            background: #4caf50;
            color: white;
            border: none;
            padding: 15px 30px;
            border-radius: 15px;
            font-size: 28px;
            font-weight: bold;
            cursor: pointer;
            flex-shrink: 0;
        }
        
        /* 签到弹窗 */
        .modal {
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            width: 750px;
            height: 100%;
            background: rgba(0,0,0,0.7);
            z-index: 1000;
            justify-content: center;
            align-items: center;
        }
        
        .modal-content {
            background: white;
            width: 90%;
            max-width: 650px;
            border-radius: 30px;
            overflow: hidden;
            animation: modalOpen 0.4s ease;
        }
        
        @keyframes modalOpen {
            from { transform: translateY(100px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        
        .modal-header {
            background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
            color: white;
            padding: 30px;
            text-align: center;
        }
        
        .modal-title {
            font-size: 36px;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .modal-subtitle {
            font-size: 28px;
            opacity: 0.9;
        }
        
        .modal-body {
            padding: 40px 30px;
        }
        
        .sign-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 30px;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 20px;
        }
        
        .info-box {
            text-align: center;
        }
        
        .info-label {
            font-size: 26px;
            color: #7f8c8d;
            margin-bottom: 10px;
        }
        
        .info-value {
            font-size: 32px;
            font-weight: bold;
            color: #2c3e50;
        }
        
        .location-container {
            background: #f8f9fa;
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            text-align: center;
        }
        
        .location-icon {
            font-size: 60px;
            color: #2575fc;
            margin-bottom: 20px;
        }
        
        .location-text {
            font-size: 30px;
            color: #555;
        }
        
        .sign-btn-container {
            display: flex;
            justify-content: center;
            margin-top: 30px;
        }
        
        .sign-confirm-btn {
            background: #4caf50;
            color: white;
            border: none;
            padding: 25px 60px;
            border-radius: 15px;
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;
            width: 100%;
        }
        
        .modal-close {
            position: absolute;
            top: 20px;
            right: 20px;
            color: white;
            font-size: 40px;
            cursor: pointer;
        }
        
        /* 底部操作栏 */
        .bottom-actions {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 750px;
            background: white;
            display: flex;
            padding: 25px 30px;
            box-shadow: 0 -5px 20px rgba(0, 0, 0, 0.1);
            z-index: 100;
        }
        
        .action-btn {
            flex: 1;
            background: #2575fc;
            color: white;
            border: none;
            padding: 25px;
            border-radius: 15px;
            font-size: 32px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .action-btn i {
            margin-right: 15px;
        }
        
        .action-btn.outline {
            background: white;
            color: #2575fc;
            border: 2px solid #2575fc;
            margin-right: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="back-btn">
                <i class="fas fa-arrow-left"></i>
            </div>
            <div class="header-title">UI/UX设计大师班</div>
            <div class="action-btn">
                <i class="fas fa-share-alt"></i>
            </div>
        </div>
        
        <!-- 课程封面 -->
        <div class="course-cover">
            <div class="course-tag">进行中</div>
            <h1 class="course-title">从零到精通：UI/UX设计实战</h1>
            <div class="course-meta">
                <div class="meta-item">
                    <i class="fas fa-user-graduate"></i> 1285人学习
                </div>
                <div class="meta-item">
                    <i class="fas fa-star"></i> 4.9 (326评价)
                </div>
            </div>
        </div>
        
        <!-- 课程信息卡片 -->
        <div class="info-card">
            <div class="info-grid">
                <div class="info-item">
                    <div class="info-label">课程时长</div>
                    <div class="info-value">8周</div>
                </div>
                <div class="info-item">
                    <div class="info-label">课程进度</div>
                    <div class="info-value">65%</div>
                </div>
                <div class="info-item">
                    <div class="info-label">签到率</div>
                    <div class="info-value">92%</div>
                </div>
            </div>
            
            <div class="progress-container">
                <div class="progress-label">
                    <span>学习进度</span>
                    <span>13/20课时</span>
                </div>
                <div class="progress-bar">
                    <div class="progress-fill"></div>
                </div>
            </div>
            
            <div class="tags-container">
                <div class="tag">设计基础</div>
                <div class="tag">Figma实战</div>
                <div class="tag">用户研究</div>
                <div class="tag">交互设计</div>
                <div class="tag">作品集指导</div>
            </div>
            
            <div class="teacher-section">
                <div class="teacher-avatar">
                    <img src="https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?ixlib=rb-4.0.3&auto=format&fit=crop&w=200&q=80" alt="讲师头像">
                </div>
                <div class="teacher-info">
                    <h3>张设计师</h3>
                    <p>前腾讯高级UI设计师，10年行业经验</p>
                </div>
            </div>
        </div>
        
        <!-- 课表部分 -->
        <div class="schedule-section">
            <div class="section-title">
                <i class="fas fa-calendar-alt"></i> 课程安排
            </div>
            
            <div class="schedule-tabs">
                <div class="tab active">全部课程</div>
                <div class="tab">未完成</div>
                <div class="tab">已完成</div>
            </div>
            
            <div class="schedule-list">
                <!-- 第一课 -->
                <div class="lesson-item">
                    <div class="lesson-icon">
                        <i class="fas fa-play-circle"></i>
                    </div>
                    <div class="lesson-content">
                        <div class="lesson-title">第1课：UI设计基础入门</div>
                        <div class="lesson-meta">
                            <div><i class="far fa-clock"></i> 08-12 14:00</div>
                            <div><i class="fas fa-video"></i> 45分钟</div>
                        </div>
                    </div>
                    <div class="lesson-status status-completed">已完成</div>
                </div>
                
                <!-- 第二课 -->
                <div class="lesson-item">
                    <div class="lesson-icon">
                        <i class="fas fa-play-circle"></i>
                    </div>
                    <div class="lesson-content">
                        <div class="lesson-title">第2课：设计工具Figma实战</div>
                        <div class="lesson-meta">
                            <div><i class="far fa-clock"></i> 08-14 14:00</div>
                            <div><i class="fas fa-video"></i> 60分钟</div>
                        </div>
                    </div>
                    <div class="lesson-status status-completed">已完成</div>
                </div>
                
                <!-- 第三课 -->
                <div class="lesson-item">
                    <div class="lesson-icon">
                        <i class="fas fa-play-circle"></i>
                    </div>
                    <div class="lesson-content">
                        <div class="lesson-title">第3课：用户研究与需求分析</div>
                        <div class="lesson-meta">
                            <div><i class="far fa-clock"></i> 08-16 14:00</div>
                            <div><i class="fas fa-video"></i> 55分钟</div>
                        </div>
                    </div>
                    <div class="lesson-status status-completed">已完成</div>
                </div>
                
                <!-- 第四课 -->
                <div class="lesson-item">
                    <div class="lesson-icon">
                        <i class="fas fa-play-circle"></i>
                    </div>
                    <div class="lesson-content">
                        <div class="lesson-title">第4课：信息架构与流程设计</div>
                        <div class="lesson-meta">
                            <div><i class="far fa-clock"></i> 08-18 14:00</div>
                            <div><i class="fas fa-video"></i> 50分钟</div>
                        </div>
                    </div>
                    <div class="lesson-status status-completed">已完成</div>
                </div>
                
                <!-- 第五课（当前课） -->
                <div class="lesson-item">
                    <div class="lesson-icon">
                        <i class="fas fa-bullhorn"></i>
                    </div>
                    <div class="lesson-content">
                        <div class="lesson-title">第5课：交互原型设计实战</div>
                        <div class="lesson-meta">
                            <div><i class="far fa-clock"></i> 08-20 14:00</div>
                            <div><i class="fas fa-video"></i> 70分钟</div>
                        </div>
                    </div>
                    <div class="lesson-status status-live">进行中</div>
                </div>
                
                <!-- 第六课 -->
                <div class="lesson-item">
                    <div class="lesson-icon">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="lesson-content">
                        <div class="lesson-title">第6课：设计评审与反馈处理</div>
                        <div class="lesson-meta">
                            <div><i class="far fa-clock"></i> 08-22 14:00</div>
                            <div><i class="fas fa-video"></i> 45分钟</div>
                        </div>
                    </div>
                    <div class="lesson-status status-upcoming">未开始</div>
                </div>
                
                <!-- 第七课 -->
                <div class="lesson-item">
                    <div class="lesson-icon">
                        <i class="fas fa-lock"></i>
                    </div>
                    <div class="lesson-content">
                        <div class="lesson-title">第7课：设计系统构建</div>
                        <div class="lesson-meta">
                            <div><i class="far fa-clock"></i> 08-24 14:00</div>
                            <div><i class="fas fa-video"></i> 65分钟</div>
                        </div>
                    </div>
                    <div class="lesson-status status-upcoming">未开始</div>
                </div>
            </div>
        </div>
        
        <!-- 签到弹窗 -->
        <div class="modal" id="signModal">
            <div class="modal-content">
                <div class="modal-header">
                    <div class="modal-title">课程签到</div>
                    <div class="modal-subtitle">第5课：交互原型设计实战</div>
                </div>
                <div class="modal-body">
                    <div class="sign-info">
                        <div class="info-box">
                            <div class="info-label">签到时间</div>
                            <div class="info-value">14:00-14:10</div>
                        </div>
                        <div class="info-box">
                            <div class="info-label">当前时间</div>
                            <div class="info-value" id="current-time">14:05</div>
                        </div>
                    </div>
                    
                    <div class="location-container">
                        <div class="location-icon">
                            <i class="fas fa-map-marker-alt"></i>
                        </div>
                        <div class="location-text">
                            南宁市青秀区金湖广场
                        </div>
                        <div style="font-size: 26px; color: #7f8c8d; margin-top: 15px;">
                            距离签到点：<span style="color: #4caf50;">125米</span>
                        </div>
                    </div>
                    
                    <div class="sign-btn-container">
                        <button class="sign-confirm-btn">
                            <i class="fas fa-check-circle"></i> 立即签到
                        </button>
                    </div>
                </div>
                <div class="modal-close">
                    <i class="fas fa-times"></i>
                </div>
            </div>
        </div>
        
        <!-- 底部操作栏 -->
        <div class="bottom-actions">
            <button class="action-btn outline">
                <i class="fas fa-bookmark"></i> 收藏
            </button>
            <button class="action-btn" id="openSignBtn">
                <i class="fas fa-clipboard-check"></i> 课程签到
            </button>
        </div>
    </div>

    <script>
        // 打开签到弹窗
        document.getElementById('openSignBtn').addEventListener('click', function() {
            document.getElementById('signModal').style.display = 'flex';
        });
        
        // 关闭弹窗
        document.querySelector('.modal-close').addEventListener('click', function() {
            document.getElementById('signModal').style.display = 'none';
        });
        
        // 签到按钮
        document.querySelector('.sign-confirm-btn').addEventListener('click', function() {
            alert('签到成功！您已成功签到第5课');
            document.getElementById('signModal').style.display = 'none';
            
            // 更新课程状态
            const currentLesson = document.querySelector('.lesson-status.status-live');
            currentLesson.textContent = "已完成";
            currentLesson.className = "lesson-status status-completed";
            
            // 更新进度
            const progressFill = document.querySelector('.progress-fill');
            progressFill.style.width = '70%';
            document.querySelector('.progress-label span:last-child').textContent = '14/20课时';
        });
        
        // 更新当前时间
        function updateTime() {
            const now = new Date();
            const hours = now.getHours().toString().padStart(2, '0');
            const minutes = now.getMinutes().toString().padStart(2, '0');
            document.getElementById('current-time').textContent = `${hours}:${minutes}`;
        }
        
        // 初始更新时间并设置定时器
        updateTime();
        setInterval(updateTime, 60000);
        
        // 切换标签页
        const tabs = document.querySelectorAll('.tab');
        tabs.forEach(tab => {
            tab.addEventListener('click', function() {
                tabs.forEach(t => t.classList.remove('active'));
                this.classList.add('active');
            });
        });
        
        // 课程项点击事件
        const lessonItems = document.querySelectorAll('.lesson-item');
        lessonItems.forEach(item => {
            item.addEventListener('click', function() {
                const title = this.querySelector('.lesson-title').textContent;
                alert(`即将进入课程：${title}`);
            });
        });
    </script>
</body>
</html>